<template>
  <view class="page">
    <UserDate/>
    <!-- <TopTip color="#218F70" bcolor="#DFF5F1">
      <u-icon name="checkmark-circle-fill" style="margin-right: 16upx;"></u-icon>
      医生审核已通过，请尽快缴费
    </TopTip> -->
    
    <view class="tcard">
      <view class="title">
        检验信息
      </view>
      <view class="tform">
        <!-- <view class="tform-item">
          <view class="label">
            就诊科室
          </view>
          <view class="value">
            自助开单门诊
          </view>
        </view> -->
        <view class="tform-item">
          <view class="label">
            申请时间
          </view>
          <view class="value">
            {{dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')}}
          </view>
        </view>
        <!-- <view class="tform-item">
          <view class="label">
            就诊院区
          </view>
          <view class="value">
            雅安市人民医院（大兴院区）
          </view>
        </view> -->
        <view class="tform-item">
          <view class="label">
            支付状态
          </view>
          <view class="value">
            未支付
          </view>
        </view>
        <view class="tform-item" style="border: none;">
          <view class="label">
            费用
          </view>
          <view class="value" style="color: #FF7F7F;">
            ￥{{totalMoney | fixed}}
          </view>
        </view>
      </view>
      <view class="info-box">
        <view class="flexR" v-for="item in checkItems" :key="item.CMBBH">
          <text>{{item.CSFXMMC}}</text>
          <text>¥{{item.MJE | fixed}} X {{item.ICOUNT}}</text>
        </view>
        <!-- <view class="flexR">
          <text>挂号费</text>
          <text>¥2.00</text>
        </view> -->
      </view>
    </view>
    
    <view class="pay">
      <view class="">
        <text>
          合计：
        </text>
        <text class="money">
          ￥{{totalMoney | fixed}}元
        </text>
      </view>
      
      <view class="btn" @click="toConfirm">
        支 付
      </view>
    </view>
  </view>
</template>

<script>
  import UserDate from '@/components/UserInfo/user-date.vue'
  import dayjs from 'dayjs'
  export default {
    components:{UserDate},
    data() {
      return {
        dayjs,
        totalMoney: 0,
        checkItems: []
      }
    },
    onLoad(opt) {
      this.totalMoney = opt.totalMoney
      this.checkItems = JSON.parse(opt.checkItems)
    },
    methods: {
      toConfirm() {
        uni.navigateTo({
          url: `./cashier?totalMoney=${this.totalMoney}&checkItems=${JSON.stringify(this.checkItems)}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.info-box {
  >view {
    justify-content: space-between;
  }
}
.pay {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 108upx;
  padding: 0 32upx;
  box-shadow: 0px -8px 76px 22px rgba(227,237,255,0.58);
  background-color: #FFF;
  .btn {
    width: 240upx;
    height: 64upx;
    background: $theme-color;
    border-radius: 64upx;
    text-align: center;
    line-height: 64upx;
    color: #FFF;
  }
  .money {
    color: $theme-color;
    font-size: 36upx;
  }
}
</style>
